<template>
    <el-table :data="list" border style="width: 100%" :cell-style="{ textAlign: 'center' }"
        :header-cell-style="{ 'text-align': 'center' }">
        <!-- 18.32这个时候 label是表头的标题，prop是存进去数据的对应英文 -->
        <el-table-column prop="id" label="编号" />
        <el-table-column prop="name" label="分类名称" />
        <el-table-column prop="level" label="级别" #default="{ row }"> {{ row.level === 0 ? '一级' : '二级' }}</el-table-column>
        <el-table-column prop="productCount" label="商品数量" />
        <el-table-column prop="productUnit" label="数量单位" />
        <!-- 十九、启用禁用 -->
        <!-- 19.1使用 element-plus 组件库里面的 Switch 开关 --- 扩展的 value 类型 -->
        <!-- <el-table-column prop="" label="是否启用" /> -->
        <el-table-column prop="navStatus" label="导航栏">
            <template #default="{ row }">
                <el-switch v-model="row.navStatus" :active-value="1" :inactive-value="0" @change="switchChange(row)" />
            </template>
        </el-table-column>

        <el-table-column prop="showStatus" label="是否显示">
            <template #default="{ row }">
                <el-switch v-model="row.showStatus" :active-value="1" :inactive-value="0" @change="xianshiChange(row)" />
            </template>
        </el-table-column>
        <el-table-column prop="sort" label="排序" />
        <el-table-column label="设置" width="250">
            <template #default="{ row }">
                <el-button text bg @click="ChaKanXiaJi(row.id)">查看下级</el-button>
                <el-button text bg>转移商品</el-button>
            </template>

        </el-table-column>
        <el-table-column label="操做" width="200">
            <template #default="{ row }">
                <el-button text bg @click="BianJi(row.id)">编辑</el-button>
                <el-button type="danger" @click="ShanChu(row.id)">删除</el-button>
            </template>
        </el-table-column>
    </el-table>

    <!-- 分页 -->
    <PaginationTwo v-model:current-page="pageNum" v-model:page-size="pageSize" :page-sizes="[10, 20, 50, 100]"
        :total="total" />
</template>
<script setup lang='ts'>
import { ShangPinFenLei, XiuGaiDaoHangLanApi, XiuGaiXianShiApi, ShanChuApi } from "../../http/ums/api.ts"
// 26.6导入分页组件
import PaginationTwo from '@/components/Pagination/PaginationTwo.vue'

import useTable from '@/hooks/useTable'
// import router from "@/router";

//@ts-ignore
import { ElMessage, ElMessageBox } from "element-plus";


import { reactive } from 'vue';
import { useRouter } from 'vue-router';
const router = useRouter()

// const tableData = ref<ShangPinFenLeiBaoGe>()

// 定义传进去的参数数据
const queryParams = reactive({
    parentId: 0
})

const { list, pageNum, pageSize, total, fetch } = useTable(ShangPinFenLei, queryParams)

// console.log(list);

const switchChange = (user: any) => {
    console.log(user)
    XiuGaiDaoHangLanApi({
        ids: [user.id],
        navStatus: user.navStatus
    }).then(res => {
        if (res.code === 200) {
            console.log(res);
            // 弹框
            ElMessage({
                type: 'success',
                message: '修改用户状态成功'
            })
        } else {
            // 回归原来的状态
            user.navStatus = user.navStatus === 1 ? 0 : 1
        }
    })
}
const xianshiChange = (user: any) => {
    XiuGaiXianShiApi({
        ids: [user.id],
        showStatus: user.showStatus
    }).then(res => {
        if (res.code === 200) {
            console.log(res);
            // 弹框
            ElMessage({
                type: 'success',
                message: '修改用户状态成功'
            })
        } else {
            // 回归原来的状态
            user.showStatus = user.showStatus === 1 ? 0 : 1
        }
    })

}

const ChaKanXiaJi = (id: number) => {
    queryParams.parentId = id
    fetch();
}
const BianJi = (id: number) => {
    console.log(33333333333333, id);
    router.push({
        path: '/pms/updateProductCate',
        query: {
            id: id
        }
    })
}

const ShanChu = (id: number) => {
    console.log(id);
    ElMessageBox.confirm("确定要删除吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
    })
        .then(() => {
            ShanChuApi(id).then((res) => {
                console.log(res);

                if (res.code === 200) {
                    ElMessage({
                        type: "success",
                        message: "删除成功"
                    });
                    fetch();
                }
            })
        })
        .catch(() => {
            ElMessage({
                type: "info",
                message: "取消删除"
            })
        })
}




</script>

<style lang="less" scoped></style>